<!--关闭警情提醒 -->
<template>
    <div class="page closeReminder-page" data-page="closeReminder">
        <div class="link-page-nav">
            <a href="#" class="link"  @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-search" style="padding-bottom: 17px;">
            <div class="closeReminder_title" style="float: left">关闭报警</div>
            <a href="#" class="link popover-open" data-popover="#closeReminder_menu" style="color: #000;">
                <i class="iconfont icon-APPicon_shaixuan1
" id="active" style="font-size: 23px;"></i>
            </a>
            <a href="#" class="link" @click="naviToRecord()" style="color: #000;">
                <i class="iconfont icon-APPicon_lishi" style="font-size: 23px;margin-right: 12px;"></i>
            </a>
        </div>
        <div  class="closeReminder-tab-con tab page-content infinite-scroll-content ptr-content" id="check-content1" style="padding-bottom: 100px;"
            data-infinite-distance="80"
            @ptr:refresh="refreshMessage">
            <div class="ptr-preloader" style="top: -44px;">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <div class="list media-list">
                <ul id="closeReminderList1" class="closeReminder-list" ></ul>
            </div>
            <!-- <div class="preloader infinite-scroll-preloader" id="trouble_preloader"></div> -->
        </div>
        <div id="study_preloader" class="preloader infinite-scroll-preloader"></div>
        <div class="more-task-btn" @click="createcloseReminder">
            <i class="iconfont icon-weibiaoti--1"></i>
        </div>

        <div class="popover select-option-con" id="closeReminder_menu">
          <div class="popover-angle"></div>
          <div class="popover-inner">
            <div class="list">
              <ul>
                <li><a href="" class="list-button item-link popover-close" id="closeReminder_org">选择单位</a></li>
                <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
              </ul>
            </div>
            </div>
        </div>

        <div class=" dialog-buttons-2 modal-in" id="showDialog" style="margin-top: -90px;">
            <div class="dialog-inner">
                <div class="dialog-title">结束确认</div>
                <div class="dialog-text">结束后，系统将会恢复正常报警</div>
            </div>
            <div class="dialog-buttons">
                <span class="dialog-button" @click="hiddenDialog">取消</span>
                <span class="dialog-button dialog-button-bold" @click="closeReminderOver">确认</span>
            </div>
            
        </div>
    </div>
</template>
<style scoped>
    .closeReminder_title {
        padding-right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        background-color: #fff;
    }
    .closeReminder-list li{
        background: #ffffff;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        margin: 0 20px;
        margin-bottom: 20px;
    }
    .yh-list .eqType{
        color: red;
        font-size: 18px;
    }
    .overtime-icon{
        color: #FFC73B;
        font-size: 18px;
    }
    .tb-content p{
        margin-top: 10px;
        font-size: 13px;
        color: #999999;
    }
    .button{
        text-decoration: none;
        text-align: center;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: 0 0;
        padding: 0 10px;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        position: relative;
        overflow: hidden;
        font-family: inherit;
        cursor: pointer;
        outline: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: middle;
        width: 100px;
    }
    .reminder_cause{
        display: inline-block;
        width: 69%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .show_details{
        display: none;
    }
    .dialog{
        display: block;
    }
    .list ul:before{
        height: 0px !important;
    }
    .list ul:after{
        height: 0px !important;
    }
    .tb-content span{
        margin-top: -21px;
        width: 80%;
        display: block;
        margin-left: 60px;
    }
</style>
<script>
return {
    mounted() {
        this.getTableList()
    },
    beforeCreate() {
        var self = this;
        var $ = self.$;
    },
    data: function() {
        return {
            selectOptionOrg : "",
            flagCause:false,
            nowId:0,//当前点击的id
            endId:'',
        }
    },
    methods: {
        naviToRecord:function(){
            app.router.navigate("/historyReminder/");
        },
        getTableList:function(orgIds){
            let self = this;
            Dao.getPoliceCloseRecords({
                queryType:0,
                pageIndex:0,
                pageSize:10,
                type:0,
                startTime:'',
                endTime:'',
                createAccount:'',
                orgIds:orgIds || userInfor.organizationIds
            }, function (res) {
                $("#closeReminderList1").empty();
                let flag = true
                let flag1 ='none'
                let isMoreUnit = false
                if (!res || res.length < 1) {
                    $("#study_preloader").hide();
                    $("#closeReminderList1").empty();
                    $("#closeReminderList1").append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
                    return;
                }
                
                for(var i = 0;i<res.length;i++){
                    res[i].endTime =res[i].beginTime.substring(0,16) + ' 至 ' + res[i].endTime.substring(0,16)
                    res[i].createTime = res[i].createTime.substring(0,16)
                }
                for (var i = 0; i < res.length; i++) {
                    if(res[i].status == 1){
                        flag = true
                        flag1 = 'none'
                    }else{
                        flag = 'none'
                        flag1 = true
                    }
                    let systemNameFlag = 'none'
                    if(res[i].systemName!=''){
                        systemNameFlag = true
                    }
                    $("#closeReminderList1").append(`
                        <li>
                            <div style="padding: 15px;"> 
                                <div class="yh-list">
                                    <span class="eqType" style="display:`+flag+`">执行中</span>
                                    <span class="overtime-icon" style="display:`+flag1+`">未开始</span>
                                    <div class="tb-title" style="display:`+flag+`;font-weight:bold;margin-bottom: 5px;">`+'系统正在关闭满足以下条件的报警提醒'+`</div>
                                    <div class="tb-title" style="display:`+flag1+`;font-weight:bold;margin-bottom: 5px;">`+'系统即将关闭满足以下条件的报警提醒'+`</div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'联网单位 '+`</p><span style="font-size:14px">`+res[i].orgName+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'建筑物 '+`</p><span style="font-size:14px">`+res[i].fbsName+`</span></div>
                                    <div class="tb-content" style="display:`+systemNameFlag+`"><p style="width:80px;display: inline-block;font-size:14px">`+'消防系统 '+`</p><span style="font-size:14px">`+res[i].systemName+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'时间段 '+`</p><span style="font-size:14px">`+res[i].endTime+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'用户角色 '+`</p><span style="font-size:14px">`+res[i].roleNames+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'事由 '+`</p><span class="reminder_cause" id="reminder_cause_`+ res[i].id+`" style="font-size:14px">`+res[i].remark+`</span></div>
                                    <div class="tb-content show_details" id="show_createName_`+ res[i].id+`"><p style="width:80px;display: inline-block;font-size:14px">`+'创建人 '+`</p><span class="reminder_cause" style="font-size:14px">`+res[i].createName+`</span></div>
                                    <div class="tb-content show_details" id="show_createTime_`+ res[i].id+`"><p style="width:80px;display: inline-block;font-size:14px">`+'创建时间 '+`</p><span class="reminder_cause" style="font-size:14px">`+res[i].createTime+`</span></div>
                                </div>
                            </div>
                            <div style="margin-bottom:15px;text-align:right">
                                <button id="getDetails_`+ res[i].id+`" class="col button  button-round getDetails" style="color:black;background-color: #F2F2F2;margin-right:15px">详情</button>
                                <button id="li_goRectification_`+ res[i].id+`" class="col button  button-fill button-round" style="background-color: #2471CA;    margin-right: 20px;">提前结束</button>
                            </div>
                        </li>`
                    );
                    jQuery("#getDetails_"+ res[i].id).off().on("click",{'res':res[i]},function(e) {
                        var self = this;
                        self.flagCause = !self.flagCause
                        jQuery(this).hide()
                        // if(self.flagCause){
                            jQuery("#reminder_cause_"+ e.data.res.id).removeClass('reminder_cause')
                            jQuery("#show_createName_"+ e.data.res.id).removeClass('show_details')
                            jQuery("#show_createTime_"+ e.data.res.id).removeClass('show_details')
                        // }else{
                            // jQuery("#reminder_cause_"+ e.data.res.id).addClass('reminder_cause')
                            // jQuery("#show_createName_"+ e.data.res.id).addClass('show_details')
                            // jQuery("#show_createTime_"+ e.data.res.id).addClass('show_details')
                        //}
                    });
                    jQuery("#li_goRectification_"+ res[i].id).off().on("click",{'res':res[i]},function(e) {
                        self.endId = e.data.res.id
                        jQuery("#showDialog").addClass('dialog') 
                        jQuery(".dialog-button-bold").click(function(e) {
                            Dao.endPoliceClose({ id:self.endId,account:userInfor.accountName }, function (res) {
                                jQuery("#showDialog").removeClass('dialog')
                                self.getTableList();
                            })
                        })
                        
                    });
                }
            })
        },
        removeScreen: function () {
            var self = this;
            if (userInfor.isMuilUnitUser == 1) { //多
                self.selectOptionOrg = "";
                self.orgId = userInfor.organizationIds;
                jQuery("#closeReminder_org").html("选择单位");
                jQuery("#closeReminder_org").removeClass('select-active');
                jQuery("#active").removeClass("select-active");
            }
            self.getTableList();
        },
        hiddenDialog: function(){
            jQuery("#showDialog").removeClass('dialog')
        },
        closeReminderOver: function(){
            var self = this;
            // Dao.endPoliceClose({ id:self.endId,account:userInfor.accountName }, function (res) {
            //     jQuery("#showDialog").removeClass('dialog')
            //     self.getTableList();
            // })
            
        },
        createcloseReminder(){
            app.router.navigate("/createcloseReminder/");
        },
        
        //下拉刷新
        refreshMessage: function (e, done) {
            var self = this;
            if (done && e) {
            var self = this;
            //self.pageIndex = 0;
            var $ = self.$$;
            setTimeout(function () {
                self.getTableList();
                done();
                $("#study_preloader").hide();
            }, 1000);
            }
        },
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            var $ = self.$;
            jQuery("#closeReminder_org").click(function(e) {
                loadSelectUnitFunc(function(data){
                    //选中
                    if(self.selectOptionOrg != data.orgId){
                        self.selectOptionOrg = data.orgId;
                        self.orgIds=data.orgId;
                        self.getTableList(self.orgIds)
                        jQuery("#closeReminder_org").html(data.orgName);
                        jQuery("#closeReminder_org").addClass('select-active');
                        jQuery("#active").addClass("select-active");

                    } else {
                        self.selectOptionOrg = "";
                        if (single_Orgid == "") {
                          self.orgIds=userInfor.organizationIds;
                        } else {
                          self.orgIds=single_Orgid;
                        }
                        jQuery("#closeReminder_org").html("选择单位");
                        jQuery("#closeReminder_org").removeClass('select-active');
                        jQuery("#active").removeClass("select-active");
                    }
                },self.selectOptionOrg);
            });
            if(userInfor.isMuilUnitUser == 0){
                jQuery('.icon-APPicon_shaixuan1').hide()
            }
        },
        pageAfterIn: function(e, page) {
           var self = this;
           var $ = self.$;
           self.getTableList();
        },
        pageBeforeOut: function(e, page) {
            var self = this;
        },
        pageBeforeRemove: function(e, page) {
        }

    }
}
</script>